<template>
    <div>
        <el-divider><span class="service">服务项目</span></el-divider>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-image :src="openImag"></el-image>
                </div>
                <span>开锁</span>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-image :src="openImag"></el-image>
                </div>
                <span>换锁</span>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-image :src="openImag"></el-image>
                </div>
                <span>修锁</span>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-image :src="openImag"></el-image>
                </div>
                <span>指纹锁</span>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-image :src="doorImag"></el-image>
                </div>
                <span>防盗门</span>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-image :src="doorImag"></el-image>
                </div>
                <span>安全门</span>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-image :src="doorImag"></el-image>
                </div>
                <span>实木门</span>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-image :src="doorImag"></el-image>
                </div>
                <span>通风门</span>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    import openImag from "../assets/o.jpeg";
    import mImag from "../assets/m.jpeg";
    import doorImag from "../assets/door.jpeg";
    export default {
        name: "Services",
        data(){
            return{
                openImag:openImag,
                mImag:mImag,
                doorImag:doorImag,
            }
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .service{
        font-weight: bold;
        font-size: 20px;
        color: #c1312f;
    }
</style>